import React, { Component } from "react";
import { NavLink, Route, Switch } from "react-router-dom";
// import Home from "../Home/Home";
// import Cate from "../Cate/Cate";
// import Shop from "../Shop/Shop";
// import Mine from "../Mine/Mine";

import "./Index.less"
import { DotLoading } from "antd-mobile";
const Home =React.lazy(()=>import("../Home/Home"))
const Cate =React.lazy(()=>import('../Cate/Cate'))
const Shop= React.lazy(()=>import("../Shop/Shop"))
const Mine=React.lazy(()=>import('../Mine/Mine'))
export default class Index extends Component {
  render() {
    return (
      <div className='index'>
       < React.Suspense fallback={<DotLoading color={'primary'}/>}></ React.Suspense>
        <Switch>
          <Route path="/index/home" component={Home}></Route>
          <Route path="/index/cate" component={Cate}></Route>
          <Route path="/index/shop" component={Shop}></Route>
          <Route path="/index/mine" component={Mine}></Route>
         
        </Switch>

        <footer>
          <NavLink activeClassName='active' to="/index/home">
            <i className='iconfont icon-shouye'></i>
            <div>首页</div>
          </NavLink>
          <NavLink activeClassName='active' to="/index/cate">
            <i className='iconfont icon-fenlei'></i>
            <div>分类</div>
          </NavLink>
          <NavLink activeClassName='active' to="/index/shop">
            <i className='iconfont icon-gouwucheman'></i>
            <div>购物车</div>
          </NavLink>
          <NavLink activeClassName='active' to="/index/mine">
            <i className='iconfont icon-wode'></i>
            <div>我的</div>
          </NavLink>
        </footer>
        {/* 底部导航 */}
      </div>
    );
  }
}
